<template>
  <div class="content-box">
    <!-- 搜索框 -->
    <el-card class="box-card">
      <div class="top">
        <div>
          <el-icon><ZoomIn /></el-icon>
          <span>筛选搜索</span>
        </div>
        <div>
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="searchfn">查询搜索</el-button>
        </div>
      </div>
      <!-- <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="活动名称:">
          <el-input v-model="formInline.val" placeholder="活动名称" />
        </el-form-item>
      </el-form> -->
      <div class="bottom">
        <span>活动名称: </span>
        <input v-model="keywordVal" placeholder="活动名称" />
      </div>
    </el-card>
    <!-- 添加 -->
    <el-card class="add-card">
      <div>
        <el-icon>
          <Fold />
        </el-icon>
        <span>数据列表</span>
      </div>
      <div>
        <el-button @click="showFlashSession">秒杀时间段列表</el-button>
        <el-button @click="addFlash">添加活动</el-button>
      </div>
    </el-card>
    <!-- 表格 -->
    <!-- 秒杀活动列表 -->
    <div class="table">
      <el-table
        :data="list"
        :cell-style="{ 'text-align': 'center' }"
        border
        ref="multipleTableRef"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="60" align="center">
        </el-table-column>
        <el-table-column
          align="center"
          prop="id"
          label="编号"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="title"
          label="活动标题"
        ></el-table-column>
        <el-table-column align="center" label="活动状态">
          活动未开始
        </el-table-column>
        <el-table-column align="center" label="开始时间">
          <template #default="scope">
            {{ formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="结束时间">
          <template #default="scope">
            {{ formatDate(scope.row.endDate) }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="status" label="上线/下线">
          <template #default="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              @change="switchfn(scope.row.id, scope.row.status)"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="id" label="操作">
          <template #default="scope">
            <div class="edit">
              <el-button
                size="small"
                text
                type="primary"
                @click="toFlashSession(scope.row.id)"
                >设置商品</el-button
              >
              <el-button
                size="small"
                text
                type="primary"
                @click="showEditFlash(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="small"
                text
                type="primary"
                @click="showDel(scope.row.id)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:currentPage="paginate.currentPage"
        v-model:page-size="paginate.pageSize"
        :page-sizes="[5, 10, 15]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginate.total"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 添加弹框 -->
    <AddFlash :visible="addFlashVisible" @close="closeAddFn" />
    <!-- 编辑弹框 -->
    <EditFlash
      :visible="editFlashVisible"
      :data="editFlashData"
      @close="closeEditFn"
    />
    <!-- 删除确认弹框 -->
    <DelFlash
      :visible="delVisible"
      :delApi="delApi"
      :delId="delId"
      @close="closeDel"
    />
  </div>
</template>

<script setup lang="ts">
import { useTable } from "@/hook/table";
import * as http from "@/request/api";
import { reactive, Ref, ref } from "vue";
import dayjs from "dayjs";
import { useRouter } from "vue-router";
import AddFlash from "./component/flashAddFlash.vue";
import EditFlash from "./component/flashEdit.vue";
import DelFlash from "./component/flashDel.vue";

const keywordVal = ref("");
let { list, paginate, searchfn, handleSizeChange, handleCurrentChange } =
  useTable(http.flash.getFlashList, { keyword: keywordVal });

const multipleSelection = ref<FlashListDataRes[]>([]);
const handleSelectionChange = (val: FlashListDataRes[]) => {
  multipleSelection.value = val;
};

const router = useRouter();

// 点击切换上下线状态
async function switchfn(id: number, status: number) {
  console.log(id, status);
  await http.flash.FlashUpdateStatus(id, status);
}

// 跳转到秒杀时间段列表页面
function showFlashSession() {
  router.push("/sms/flashSession");
}

// 添加弹框显示隐藏
let addFlashVisible = ref(false);

// 点击添加按钮
function addFlash() {
  addFlashVisible.value = true;
}

// 关闭事件触发
function closeAddFn() {
  addFlashVisible.value = false;
}

// 跳转到设置商品页面
function toFlashSession(id: number) {
  router.push(`/sms/selectSession?flashPromotionId=${id}`);
}

// 编辑弹框
let editFlashVisible = ref(false);
let editFlashData = ref({}) as Ref<FlashListDataRes>;
function showEditFlash(row: FlashListDataRes) {
  editFlashVisible.value = true;
  editFlashData.value = row;
}
function closeEditFn() {
  editFlashVisible.value = false;
}

// 删除
let delVisible = ref(false);
let delId = ref();
let delApi = http.flash.FlashDelete;
function showDel(id: number) {
  delVisible.value = true;
  delId.value = id;
}
function closeDel() {
  delVisible.value = false;
}

// 重置
function reset() {
  keywordVal.value = "";
}

// 格式化时间
function formatDate(date?: string) {
  if (!date) return "";
  return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
}
</script>

<style>
.content-box {
  padding: 10px 20px;
  box-sizing: border-box;
  overflow-x: hidden;
}

.box-card {
  margin: 10px 0;
  height: 128px;
  font-size: 14px;
}

.box-card .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card .top span {
  margin: 0 8px;
}

.box-card .bottom {
  margin: 20px;
}

.box-card .bottom input {
  border: 1px solid rgb(218, 216, 216);
  height: 26px;
  border-radius: 5px;
  margin-left: 8px;
  padding-left: 5px;
  font-size: 12px;
  outline-color: rgb(179, 175, 175);
}

.el-card.add-card {
  --el-card-padding: 0;
  height: 55px;
  margin: 10px 0;
  /* width: 98%; */
  padding: 0 20px;
  box-sizing: border-box;
}

.el-card.add-card .el-card__body {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-card.add-card .el-card__body div:first-child span {
  margin-left: 10px;
}

.pagination {
  height: 40px;
  margin: 10px;
  padding-bottom: 10px;
  float: right;
}

.el-button--small {
  padding: 0;
}

.demo-form-inline {
  padding: 20px 40px 0;
}
</style>
